<template>
	<el-dialog
		title="修改资料"
		v-model="showModal"
		width="500px">
		 <el-form label-position="top" :model="form" :rules="rules" ref="ruleForm" label-width="100px" >
            <el-form-item label="用户名" prop="name" style="width:400px">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="用户类型" prop="region">
                <el-select v-model="form.region" placeholder="请选择用户类型" style="width:400px">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
			<el-form-item label="用户权限" prop="region">
                <el-select v-model="form.region" placeholder="请选择用户权限" style="width:400px">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="name" style="width:400px">
                <el-input v-model="form.name"  type="textarea" :rows="2"></el-input>
            </el-form-item>
        </el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="confirm">确 定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script>
export default {
	props:{
		show:{
			type:Boolean,
			default:false
		}
	},
	data(){
		return {
			showModal:false,
			form:{

			}
		}
	},
	watch:{
		showModal(newVal){
			this.$emit('update:show', newVal)
		},
		show(newVal){
			this.showModal=newVal
		},

	},
	methods:{
		confirm(){
			this.showModal=false
		},
		cancel(){
			this.showModal=false
		}
	}
}
</script>

<style>

</style>
